<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>10-js函数</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
       ul{
           width:600px;
           height:90px;
       }
       ul li{
           width:100%;
           height:30px;
           border-bottom:1px solid red;
       }
       ul li input[type="text"]{
           width:300px;
           border:none;
           outline: none;
       }
       ul li input[type="button"]{
           border:none;
           outline: none;
           width: 50px;
           height: 25px;
           background-color: #111;
           color: #fff;
       }
    </style>
</head>
<body>
    <ul>
        <li>
            <input type="text" id="te" value="我是一个input" readonly="readonly" />
            <input type="button" id="bu" class="butt" value="button">
        </li>
        <li>
            <input type="text" id="te1" value="我是一个input" readonly="readonly" />
            <input type="button" id="bu1" class="butt" value="button">
        </li>
        <li>
            <input type="text" id="te2" value="我是一个input" readonly="readonly" />
            <input type="button" id="bu2" class="butt" value="button">
        </li>
    </ul>
    <script src="../js/dom.js"></script>
    <script>
      var oTe = document.getElementById("te");
      var oBu = document.getElementById("bu");
      var oTe1 = document.getElementById("te1");
      var oBu1 = document.getElementById("bu1");
      var oTe2 = document.getElementById("te2");
      var oBu2 = document.getElementById("bu2");
    //   oButt.onclick = function(){
    //     oButt.style.backgroundColor = getRandomColor();
    //   }
      var bool=true;
      oBu.onclick = function(){
        if(bool){
            oBu.style.color="#111";
            oBu.style.backgroundColor="#fff";
            oBu.value="确定";
            oTe.style.border="1px solid #111";
            oTe.removeAttribute("readonly");
            bool=!bool;
        }else{
            oBu.style.color="#fff";
            oBu.style.backgroundColor="#111";
            oBu.value="button";
            oTe.style.border="none";
            oTe.setAttribute("readonly","true");
            bool=!bool;
        }
        
      }
      oBu1.onclick = function(){
        if(bool){
            oBu1.style.color="#111";
            oBu1.style.backgroundColor="#fff";
            oBu1.value="确定";
            oTe1.style.border="1px solid #111";
            oTe1.removeAttribute("readonly");
            bool=!bool;
        }else{
            oBu1.style.color="#fff";
            oBu1.style.backgroundColor="#111";
            oBu1.value="button";
            oTe1.style.border="none";
            oTe1.setAttribute("readonly","true");
            bool=!bool;
        }
        
      }
      oBu2.onclick = function(){
        if(bool){
            oBu2.style.color="#111";
            oBu2.style.backgroundColor="#fff";
            oBu2.value="确定";
            oTe2.style.border="1px solid #111";
            oTe2.removeAttribute("readonly");
            bool=!bool;
        }else{
            oBu2.style.color="#fff";
            oBu2.style.backgroundColor="#111";
            oBu2.value="button";
            oTe2.style.border="none";
            oTe2.setAttribute("readonly","true");
            bool=!bool;
        }
        
      }
    </script>
</body>
</html>